<template>
  <div class="container">
    <top></top>
    <mall-header></mall-header>
    <a-spin :spinning="spinning">
      <div class="w1200">
        <infoPopover :supplier="detail" :supid="supid"></infoPopover>
        <Banner @open="bannerOpen" :carousel-list="carouselList"></Banner>
        <div class="noteflex" v-if="bullet.length">
          <div class="note">
            <a-icon type="notification" theme="twoTone" />
            <div class="tip" v-if="bullet.length == 1">{{bullet[0].bulletinTitle}}</div>
            <a-carousel v-if="bullet.length > 1" :dot-position="dotPosition" autoplay :dots="false" :effect="effect">
              <div v-for="(i,k) in bullet" :key="k">
                <div class="tip">{{ i.bulletinTitle }}</div>
              </div>
            </a-carousel>
          </div>
        </div>
      </div>
      <hot :showMore="false" :supid="supid" @nohot="isShowNum ++"></hot>
      <floor v-for="(floor,index) in floorList" :show-bg="index%2!==0" :key="floor.id" :name="floor.name" :en-name="floor.enName" :data="floor.floorGoodsList" @detail="toDetail" @list="toList"></floor>
    </a-spin>
    <mall-footer></mall-footer>
  </div>
</template>

<script>
import Top from '@/components/base/Top.vue'
import MallFooter from '@/components/base/MallFooter.vue'
import MallHeader from '@/components/base/MallHeader.vue'
import Banner from '../portal/components/Banner'
import Hot from '../portal/components/Hot'
import Floor from '../portal/components/Floor'
import infoPopover from './components/infoPopover'
import {getCycleimgsList, getShopPortalFloorList} from '@/api/portal'
import { getShop,qryShopBulletinPage } from '@/api/shop'

export default {
  name: 'Portal',
  components: { infoPopover, Floor, Top, MallFooter, MallHeader, Banner, Hot },
  data () {
    return {
      dotPosition: 'left', // 滚动方向 top
      effect: 'fade',// 动画效果 scrollx, fade
      carouselList: [],
      floorList: [],
      detail: {},
      supid: '',
      spinning: false,
      bullet:[],
      isShowNum:0,
      params: {
        page: 1,
        limit: 50,
        pid: 0,
        startTime: new Date().getTime(),
        endTime: new Date().getTime(),
        status: '1',
        sortMode: 0
      }
    }
  },
  async created () {
    this.supid = this.$route.query.supid
    this.spinning = true
    await this.loadImgList()
    await this.loadFloor()
    await this.getShop(this.supid)
    // if(!this.isShowNum)return this.$router.push('/shop/index?supid=' + this.supid)
    this.spinning = false
  },
  methods: {
    async getShop(supplierId){
      let res = await getShop({supplierId});
      this.detail = res.data || {}
      this.detail.rateList = [
        {name: '服务', rate: 0, icon: 'service'},
        {name: '质量', rate: 0, icon: 'quality'},
        {name: '价格', rate: 0, icon: 'price'},
        {name: '体验', rate: 0, icon: 'delivery'}
      ]
      let { shopSettingsJson } = res.data
      if(shopSettingsJson) this.isShowNum ++
      let { effect, isShow } = shopSettingsJson || {}
      this.effect = effect
      if(isShow)this.qryBullet()
    },
    async qryBullet() {
      let res = await qryShopBulletinPage({page: 1,shopId:this.detail.id})
      let { records } = res.data || {}
      this.bullet = records || []
    },
    async loadImgList () {
      let res = await getCycleimgsList({position: '4',supplierId: this.supid});
      if (res.code != 0)return
      this.carouselList = res.data;
      if(res.data.length>0) this.isShowNum ++
    },
    async loadFloor () {
      let res = await getShopPortalFloorList(this.supid);
      if (res.code !== 0) return;
      let list = res.data
      list.sort((a,b)=>a.orderNum - b.orderNum);
      this.floorList = list;
      if(list.length>0) this.isShowNum ++
    },
    toDetail (id) {
      this.$router.push({
        path: '/goodsDetail',
        query: {id}
      })
    },
    toList (type,url) {
      if(url)return window.open(url)
      if(type)this.$router.push({
        path: '/goodsList',
        query: {type}
      })
    },
    bannerOpen (item) {
      if (item.openType && item.openUrl) {
        if (item.openType === '1') {
          location.href = item.openUrl
        } else {
          window.open(item.openUrl, '_blank')
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
$width: 1200px;
$mainColor: #3370FF;
$largeWidth: 1500px;
.noteflex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  i{
    margin-left: 20px;
  }
  .tip{
    padding-left:10px;
    font-size: 16px;
    width: 666px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.note{
  display: flex;
  align-items: center;
  width: calc(100% - 88px);
}
.note >>> .slick-slide {
  height: 20px;
  line-height: 20px;
  overflow: hidden;
}
.gard{
  margin-bottom: -46px;
  height: 46px;
  background: #FAFAFA;
  width: 100%;
}
.tags{
  height: 46px;
  line-height: 46px;
  display: flex;
}

.tag{
  font-size: 16px;
  font-weight: 700;
  margin: 0 25px;
  cursor: pointer;
}
.tag-check{
  position: relative;
  &::after{
    content: '';
    height: 6px;
    display: block;
    margin: -18px -6px 0px;
    border-radius: 10px;
    background-image: linear-gradient(to right, #037afa , #9ee389);
  }
}
.container {
  width: 100%;
  min-height: 100%;
  background: white;
}

.w1200 {
  width: $width;
  margin: 0 auto;
}
.topbannar{
  display: flex;
  padding-bottom: 20px;
  position: relative;
}
.bannerdiv{
  flex: 1;
  margin-left: 20px;
  width: 0;
}
</style>
